<template>
	<view>
		<!--图片开始-->
		<view class="img_wrap">
		  <image :src="goods.ptGoodsThnmb" mode="aspectFill" lazy-load  />
		</view>
		<!--图片结束-->
		<!--bar开始-->

			<view class="flex cu-bar bg-white tabbar nav-top">
				<view class="flex-twice bg-red nav-bar">
				<text class=" nav-ptPrice " >拼团价格
				<text class="text-price text-xxl">{{goods.ptPrice}}</text>
				</text>
					
				<text class=" nav-price text-gray" >最低价格
				<text class="text-price"></text>
				{{goods.price}} | 还剩{{goods.ptGoodsNum}}件</text>
				</view>
				<view class="cu-tag-title bg-cyan"
				  style="">限时拼团</view>
				
				<view class="flex-sub bg-orange padding nav-bar">
					<view class="example-body">
						<uniCountdown :day="goodsTime.day" :hour="goodsTime.hour" :minute="goodsTime.minute" :second="goodsTime.second" 
						color="#FFFFFF" background-color="#e54d42" border-color="#e54d42" @timeup="timeup"/>
					</view>
				</view>				
			</view>
		<!--bar结束-->
		<!--标题开始-->
		<view class="bg-white padding">
			<text class="text-bold">{{goods.content}}</text>
		</view>
		<!--标题结束-->
		<!--轮播开始-->
		<view class="cu-bar bg-white margin-top-sm justify-between flex" v-if="collage.length>0">
			<view class="action">
				<text class="text-sm">{{collageNum}}人正在拼单，可直接参与</text>
			</view>
			<view class="action" @tap="showModal" data-target="allCollageModal">
				<text class="text-sm">查看全部</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>		
		<swiper v-if="collage.length>0" class="nav-swiper"  :indicator-dots="false" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" >
			<swiper-item v-for="(item,index) in collage" :key="index" :class="cardCur==index?'cur':''">
				<view class="nav-item bg-white">
					<!--<image src="http://39.106.100.179:9999/group1/M00/00/00/J2pks17GFY-AWZFSAABTolPbDrw977.jpg" mode="aspectFill" ></image>-->
					<view class="cu-bar">
						<view class="nav-avatar-group">
							<view class="nav-avatar round lg" :style="[{ backgroundImage:'url(' +item.tzPtCode.user.avatarurl + ')' }]"></view>
							<view class="nav-avatar round lg" v-if="item.tyPtCode.length>0" :style="[{ backgroundImage:'url(' +item.tyPtCode[0].user.avatarurl+ ')' }]"></view>
						</view>
						<!--<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+'http://39.106.100.179:9999/group1/M00/00/00/J2pks17GFY-AWZFSAABTolPbDrw977.jpg'+')'}]"></view>-->
						<view class="nav-ptNum">
							<view class="text-grey text-sm">还差{{2-item.tyPtCode.length}}人</view>
						</view>
						<view class="nav-ptTime">
							<uni-countdown :show-day="false" :hour="item.hour" :minute="item.minute" :second="item.second" color="#8799a3"/>
						</view>
						<view v-if="userId!=item.tyPtCode[0].uid&&userId!=item.tzPtCode.uid" class="cu-btn bg-red radius" @tap="showModal" :data-target="'collageModal-'+index" >
							去拼单
						</view>
						<view v-else class="cu-btn bg-red radius">
							我在拼
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!--轮播结束-->
		<!--查看全部模拟框开始-->
		<view>
		<!--列表控件开始-->
		<view class="cu-modal" :class="modalName=='allCollageModal'?'show':''"  >		
		<view class="cu-dialog  nav-ptModal">
		<!--上部分开始-->
				<view class="cu-bar bg-white justify-end">
					<view class="basis-xl padding-sm radius" @tap="goTop">可参与的拼团</view>
					<!--<view class="action" @tap="goTop">
						<view class="margin-lr-xs content" >可参与的拼团</view>
					</view>-->					
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
		<!--上部分结束-->		
				<!--列表开始 -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" 
				@scroll="scroll">
				<view class="cu-list menu-avatar" >
					<view class="cu-item"  v-for="(item,index) in collage" :key="index"
					 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" >
						<!--bar开始-->
						<view class="cu-bar">
							<view class="nav-avatar-group" style="margin-left: -30%;">
								<view class="nav-avatar round lg" v-if="item.tyPtCode.length>0" :style="[{ backgroundImage:'url(' +item.tyPtCode[0].user.avatarurl+ ')' }]"></view>
								<view class="nav-avatar round lg" :style="[{ backgroundImage:'url(' +item.tzPtCode.user.avatarurl + ')' }]"></view>								
								</view>
							<view v-if="userId!=item.tyPtCode[0].uid&&userId!=item.tzPtCode.uid" class="cu-btn bg-red radius"  @tap="showModal" :data-target="'collageModal-'+index">
								去拼单
							</view>
							<view v-else class="cu-btn bg-red radius" >
								我在拼
							</view>
						</view>
						<!--bar结束-->
					</view>
				</view>
				</scroll-view>
				<!-- 列表结束-->	
			</view>				
			</view>
		<!--列表控件结束 -->	
		</view>
		<!--查看全部模拟框结束-->
		<!--拼团模拟框开始-->		
			<view class="cu-modal" :class="modalName=='collageModal-'+index?'show':''"
			v-for="(item, index) in collage" :key="index" :data-target="index">
				<view class="cu-dialog nav-Modal" >
					<view class="cu-bar bg-white justify-end">
						<view class="margin-lr-xs content-ani" style="margin-right: 15%;">
							<text class="text-bold">参与J爷的拼单</text></view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding">
					<view class="text-sm">
						<text class="text-lg">仅剩{{2-item.tyPtCode.length}}个名额</text>						
					</view>
					<view class="" style="margin-left: 25%;">
						<uni-countdown :show-day="false" :hour="item.hour" :minute="item.minute" :second="item.second" color="#8799a3"/>
					</view>
					<view class="padding margin-lr-xs">
						<view class="nav-avatar round lg" :style="[{ backgroundImage:'url(' +item.tzPtCode.user.avatarurl + ')' }]"></view>
						<view class="nav-avatar round lg" v-if="item.tyPtCode.length>0" :style="[{ backgroundImage:'url(' +item.tyPtCode[0].user.avatarurl+ ')' }]"></view>
						<view class="nav-avatar round lg" v-else :style="[{ backgroundImage:'url(' +'http://pic.51yuansu.com/pic2/cover/00/39/75/5812f9df430bf_610.jpg'+ ')' }]"></view>
						<view class="nav-avatar round lg" :style="[{backgroundImage:'url(' +'http://pic.51yuansu.com/pic2/cover/00/39/75/5812f9df430bf_610.jpg'+ ')' }]"></view>
						</view>
					<view class="cu-btn bg-red radius" @tap="goCollage(item.tzPtCode.ptCode)">参与拼单</view>
					</view>
			
				</view>
			</view>
		<!--拼团模拟框结束-->
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>商品详情
			</view>
		</view>
		<view class="img_wrap">
		  <image :src="goods.ptGoodsImgs" mode="aspectFill" lazy-load  />
		</view>
		<view class="img_wrap">
		  <image :src="goods.ptGoodsImgs" mode="aspectFill" lazy-load  />
		</view>
		<view class="img_wrap">
		  <image :src="goods.ptGoodsImgs" mode="aspectFill" lazy-load  />
		</view>
		<!-- 空白条开始-->
		<view class="cu-tabbar-height"></view>
		<!--空白条结束 -->
	<!--底部结束-->
	<view >
		<view class="cu-bar bg-white tabbar foot">
			<view class="action">
				<text class="cuIcon-markfill text-orange nav-text" >					
				</text>		
				客服
			</view>
			<view class="bg-red submit" @tap="startCollage">发起拼单</view>
		</view>			
	</view>
	<!--底部结束 -->	
	</view>

</template>

<script>
	import uniCountdown from '../../../component/uniCountdown.vue'
	import moment from "moment";
	moment.locale("zh-cn");
	export default{
		components: {
			uniCountdown
		},
		data(){
			return{
				cardCur:0,
				allCollageList:[],
				goods:{},
				collage:[],//拼单
				modalName:null,
				listTouchStart: 0,
				listTouchDirection: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			    goodsId:0,
				goodsTime:{
					day:0,
					hour:0, 
					minute:0,
					second:0
				},
				now:moment(),
				collageNum:0,//拼团人数
				ptCode:0,//拼团邀请码
				userId:0
			}
		},
		onLoad(option) {
			this.goodsId=option.id;
			this.userId=uni.getStorageSync("user").id;
			this.getGoods();
			this.getCollage();
		},
		onShow: function(e) {
		    this.getCollage();
		},
		mounted() {
			 setInterval(()=>{
			 this.now = moment()
			 },1000)
		},
		methods:{
			getCollage(){
				this.request({
				  url:
				    this.apiServer +
				    "/ptInfo/findAllPtByGoodsId?limit=10&skip=0&goodsId="+this.goodsId//暂时限制显示10条，学习人家拼多多
				}).then(res => {
				  console.log(res);
				  this.collageNum=0;
				  res.data.forEach(
				    v=>{
						//console.log(v.tzPtCode.endTime)
						//console.log(v.tyPtCode)
						this.collageNum=1+v.tyPtCode.length+this.collageNum						
						//console.log(this.collageNum)
						let dura = moment(v.tzPtCode.endTime).format('x') - moment(this.now).format('x');
						var du=moment.duration(dura, 'ms');
						//console.log(du.days()+":"+du.hours()+":"+du.minutes()+":"+du.seconds())
						if(du.hours()>=0&&du.minutes()>=0&&du.seconds()>=0)
						{
						v.hour=du.hours();
						v.minute=du.minutes();
						v.second=du.seconds();					
						}
					}
				  );
				  this.collage=res.data;
				});
			},
			getGoods(){
				this.request({
				  url:
				    this.apiServer +
				    "/ptGoods/findPtGoodsById?Id=" +this.goodsId
				}).then(res => {
				  console.log(res);
				  this.goods = res.data;
				  this.countDown();
				});
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			timeup() {
				uni.showToast({
					title: '时间到'
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null;
			},
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.userListName = e.currentTarget.dataset.target
				} else {
					this.userListName = null
				}
				this.listTouchDirection = null
			},
			scroll: function(e) {
				//console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"已返回顶部"
				})
			},
			countDown(){
				//console.log(moment(this.now).format('x'))
				//console.log(moment(this.goods.endTime).format('x'))
				let dura = moment(this.goods.endTime).format('x') - moment(this.now).format('x');
				var du=moment.duration(dura, 'ms');
				console.log(du.days()+":"+du.hours()+":"+du.minutes()+":"+du.seconds())
				if(du.days()>=0&&du.hours()>=0&&du.minutes()>=0&&du.seconds()>=0)
				{
				this.goodsTime.day=du.days();
				this.goodsTime.hour=du.hours();
				this.goodsTime.minute=du.minutes();
				this.goodsTime.second=du.seconds();					
				}
			},
			goCollage(code){//参与拼单
				//console.log(this.goods[index].id)
				uni.navigateTo({
					url: '../collagePayment/index?goodsId='+this.goodsId
					+"&goods="+encodeURIComponent(JSON.stringify(this.goods))+"&ptCode="+code,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				this.modalName=null;
			},
			startCollage(){//发起拼单
				//console.log(this.goods[index].id)
				uni.navigateTo({
					url: '../collagePayment/index?goodsId='+this.goodsId
					+"&goods="+encodeURIComponent(JSON.stringify(this.goods))+"&ptCode=0",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			
		}
	}
</script>

<style>
	.nav-top{
		margin-top: -20upx;	
	}
	.nav-bar{
		height: 120upx;
	}
	.nav-text{
		position: absolute;
		left: 70upx;
		bottom: 2upx;
		font-size: 20upx;
		text-align: center;

	}
	.nav-price{
		position: absolute;
		left:20upx;
		bottom:5upx;
		font-size: 22upx;
		text-align: center;
		color: #EEE9E9;
	}
	.nav-ptPrice{
		position: absolute;
		left: 20upx;
		bottom: 38upx;
		font-size: 28upx;
		text-align: center;
	}
	.nav-ptTime{
		position: absolute;
		left:33%;
		bottom:-5upx;
		text-align: center;
		color: #EEE9E9;
	}
	.nav-ptNum{
		position: absolute;
		left:50%;
		top: 5upx;
		text-align: center;
		color: #EEE9E9;
	}
	.cu-tag-title {
		font-size: 24upx;
		vertical-align: middle;
		position: absolute;
		left: 34%;
		top: 5upx;
	    border-radius: 20rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0upx 16upx;
		height: 48upx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;		
	}
	.nav-swiper {
		height: 130upx !important;
	}
	.nav-swiper swiper-item {
		width: 610upx !important;
		left: 70upx;
		box-sizing: border-box;
		padding: 20upx 0upx 0upx;
		overflow: initial;
	}	
	.nav-swiper swiper-item .nav-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10upx;
		transform: scale(0.9);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}
	.nav-swiper swiper-item.cur .nav-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}
	.nav-avatar-group {
		direction: rtl;
		unicode-bidi: bidi-override;
		padding: 0 10upx 0 40upx;
		display: inline-block;
	}
	
	.nav-avatar-group .nav-avatar {
		margin-left: -30upx;
		border: 4upx solid #f1f1f1;
		vertical-align: middle;
	}
	
	.nav-avatar-group .nav-avatar.sm {
		margin-left: -20upx;
		border: 1upx solid #f1f1f1;
	}
	.nav-avatar {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		color: #ffffff;
		white-space: nowrap;
		position: relative;
		width: 64upx;
		height: 64upx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
	}
	.nav-avatar.sm {
		width: 48upx;
		height: 48upx;
		font-size: 1em;
	}
	
	.nav-avatar.lg {
		width: 96upx;
		height: 96upx;
		font-size: 2em;
	}
	.scroll-Y {
		height: 400rpx;
	}
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.nav-ptModal {
		width: 60%;
	}
	.nav-Modal {
		width: 70%;
	}
</style>
